<template>
  <div>
    <keep-alive>
      <router-view></router-view>
    </keep-alive>
    <div>
      <div class="marquee-left" @mouseleave="mouseleave" @mouseenter="mouseenter">
        <div class="marquee-bg" v-show="visible" @click="routeLeft">
          <i class="iconfont icon-t-arrow marquee-icon"></i>
        </div>
      </div>
      <div class="marquee-right" @mouseleave="mouseleave" @mouseenter="mouseenter">
        <div class="marquee-bg" v-show="visible" @click="routeRight">
          <i class="iconfont icon-r-arrow marquee-icon"></i>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import { mapGetters } from 'vuex'
  export default {
    name: 'index',
    data () {
      return {
        screenInterval: null,
        visible: false
      }
    },
    computed: {
      ...mapGetters({
        currentUser: 'currentUser',
        screenSetting: 'getScreenSetting'
      })
    },
    watch: {
      'screenSetting.auto' (status) {
        if (status) {
          this.init()
        } else {
          this.visible = true
          window.clearInterval(this.screenInterval)
          this.screenInterval = null
          setTimeout(() => {
            this.visible = false
          }, 1000 * 10)
        }
      }
    },
    mounted () {
      if (this.$local.get('login') === 'projectLogin') {
        this.init()
      }
    },
    beforeRouteLeave (to, from, next) {
      window.clearInterval(this.screenInterval)
      this.screenInterval = null
      next()
    },
    methods: {
      init () {
        if (!this.screenInterval) {
          this.screenInterval = setInterval(() => {
            this.routeRight()
          }, 1000 * 60 * 3)
        }
      },
      routeLeft () {
        if (this.$route.name === 'screenVideoProject') {
          this.$router.push({name: 'panoramagram'})
        } else if (this.$route.name === 'panoramagram') {
          this.$router.push({name: 'projectVideo'})
        } else if (this.$route.name === 'company') {
          this.$router.push({name: 'screenVideoArea', query: {auto: true, name: this.currentUser.companyTitle, departmentId: this.currentUser.departmentId}})
        } else if (this.$route.name === 'screenVideoArea') {
          this.$router.push({name: 'company'})
        } else {
          this.$router.push({name: 'screenVideoProject', query: {pjId: this.currentUser.pjId, name: this.currentUser.pjName, auto: true}})
        }
      },
      routeRight () {
        if (this.$route.name === 'projectVideo') {
          this.$router.push({name: 'panoramagram'})
        } else if (this.$route.name === 'panoramagram') {
          this.$router.push({name: 'screenVideoProject', query: {pjId: this.currentUser.pjId, name: this.currentUser.pjName, auto: true}})
        } else if (this.$route.name === 'company') {
          this.$router.push({name: 'screenVideoArea', query: {auto: true, name: this.currentUser.companyTitle, departmentId: this.currentUser.departmentId}})
        } else if (this.$route.name === 'screenVideoArea') {
          this.$router.push({name: 'company'})
        } else {
          this.$router.push({name: 'projectVideo'})
        }
      },
      mouseleave () {
        this.visible = false
      },
      mouseenter () {
        if (!this.screenSetting.auto) {
          this.visible = true
        }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .marquee-left{
    position: fixed;
    width: 35px;
    height: 100%;
    top: 0;
    left: 0;
    cursor: pointer;
  }
  .marquee-right{
    position: fixed;
    width: 35px;
    height: 100%;
    top: 0;
    right: 0;
  }
  .marquee-icon{
    color: #fff;
    position: absolute;
    top: 50%;
    left: 10px;
  }
  .marquee-bg{
    background: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
</style>
